<template>
  <div class="aotoBox">
    <div class="myTopBgBox">
      <div class="myTopBg">
        <div class="imgBox" @click="imgClick">
          <img src="../../assets/images/tx.jpg" />
        </div>
        <div class="imgBottom">
          <p>{{ obj.userName }}</p>
          <ul>
            <li>
              <span>登录账号</span>
              <div class="b">{{ obj.account }}</div>
            </li>
            <li>
              <span>所属部门</span>
              <div class="b">{{ obj.postName }}</div>
            </li>
            <li>
              <span>角色</span>
              <div class="b">{{ obj.roleName }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="myTopRight">{{ loginTime }}</div>
    </div>
    <div class="recordList">
      <div class="xian" />
      <ul>
        <li @click="$router.push('/firstInspectionRecord')">
          <div>
            <i class="iconfont icon-shoumojian leftIcont" />
            首件检记录查询
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li>
        <!-- <li @click="$router.push('/patrolInspectionRecord')">
          <div>
            <i class="iconfont icon-guochengjianyangongdan leftIcont" />
            巡检记录查询
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li>
        <li @click="$router.push('/processInspectionRecord')">
          <div>
            <i class="iconfont icon-guochengjianyangongdan leftIcont" />
            工序检记录查询
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li>
        <li @click="$router.push('/finalInspectionRecord')">
          <div>
            <i class="iconfont icon-chengpinjian leftIcont" />
            成品检记录查询
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li> -->
        <li @click="$router.push('/incomingInspectionDetails')">
          <div>
            <i class="iconfont icon-chengpinjian leftIcont" />
            来料检记录查询
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li>
        <li @click="loginOut">
          <div>
            <i class="iconfont icon-tuichu leftIcont" />
            退出
            <i class="iconfont icon-zyojiantou rightIcont" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "My",
  data() {
    return {
      loginTime: "",
      obj: JSON.parse(localStorage.getItem("padUserInfo")).data,
    };
  },
  mounted() {
    // eslint-disable-next-line no-extend-native
    Date.prototype.Format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, this.getFullYear() + "");
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    };
    this.loginTime = new Date(
      JSON.parse(localStorage.getItem("padUserInfo")).time
    ).Format("yy-MM-dd hh:mm:ss");
  },
  methods: {
    clearCookie(name) {
      document.cookie =
        name + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
      localStorage.removeItem("EMEStoken");
    },
    loginOut() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认退出?",
        })
        .then(async () => {
          const token = localStorage.getItem("EMEStoken");
          const res = await this.$axios.delete(
            `/system/user-session/delete?id=${token}`
          );
          this.clearCookie("token");
          this.$toast.success("退出成功!");
          this.$router.replace("/login");

          //   this.$router.go(-this.$router.history.length + 1)
          //   history.replaceState
          //  this.$router.push('/login')
        })
        .catch(() => {});
    },

    imgClick() {
      this.$router.push("/userDetails");
    },
  },
};
</script>

<style lang='scss' scoped>
.myTopBgBox {
  position: relative;
  .myTopRight {
    width: 40%;
    position: absolute;
    right: 0;
    top: 20px;
    text-align: right;
    padding-right: 10px;
    font-size: 20px;
    background: -webkit-linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .myTopBg {
    height: 230px;
    // background: linear-gradient(to bottom right, #25cfb9, #6853e8);
    background: url(../../assets/images/myBg.png) no-repeat bottom #022566;
    background-size: 100% auto;
    position: relative;
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
    color: #fff;
    .myTopLeft {
      width: 40%;
      position: absolute;
      left: 0;
      padding-left: 10px;
      font-size: 20px;
    }
    .imgBox {
      z-index: 2;
      position: absolute;
      top: 60px;
      border-radius: 120px;
      border: 3px solid #fff;
      width: 120px;
      height: auto;
      box-shadow: 1px 1px 1px #ccc;
      img {
        border-radius: 120px;
        width: 100%;
        height: auto;
      }
    }
    .imgBottom {
      font-size: 20px;
      color: #333;
      z-index: 1;
      width: 70%;
      height: 200px;
      padding-top: 50px;
      text-align: center;
      position: absolute;
      bottom: -100px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 1px 2px 3px 1px rgb(238, 238, 238);
      p {
        color: #022566;
        font-weight: bold;
      }
      ul {
        overflow: hidden;
        padding-top: 20px;
        li {
          width: 33.33%;
          float: left;
          span {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #022566;
          }
          .b {
            color: #1cacff;
            width: 95%;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
            font-weight: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
.recordList {
  height: calc(100% - 290px);
  position: relative;
  padding: 130px 20px 20px 20px;
  .xian {
    height: 70%;
    background: #ddd;
    position: absolute;
    left: 50px;
    width: 1px;
  }
  ul {
    height: 100%;
    width: 100%;
    li {
      height: 55px;
      line-height: 55px;
      margin: 20px 0;
      padding-left: 60px;
      position: relative;
      div {
        background: #fff;
        padding-left: 20px;
        border-radius: 10px;
        font-size: 20px;
        .leftIcont {
          border: 1px solid #ccc;
          font-size: 23px;
          position: absolute;
          left: 5px;
          padding: 0 13px;
          border-radius: 20px;
          height: 45px;
          line-height: 45px;
          background: linear-gradient(to bottom right, #1cacff, #022566);
          color: #fff;
        }
        .rightIcont {
          position: absolute;
          right: 5px;
          font-size: 23px;
        }
      }
    }
  }
}
</style>
